<template>
    <div :class="['maps',start_draw_status==true?'draw':'']" style="display: flex;height: 100%;min-width: 1446px;position: relative;"> 
        <div id="mapDiv1">
            <div class="message-bar" >
                <a-space ref="tools" size="small">
                    <span class="tiam-span">{{GetTitle(1)}}</span>
                </a-space>
            </div>
        </div>
        <div id="mapDiv2" @keydown="keydown" @mouseenter="mouseenter">
            <div class="message-bar" >
                <a-space ref="tools" size="small">
                <span class="tiam-span">{{GetTitle(2)}}</span>
                </a-space>
            </div>
        </div>
        <ul  class="map-tools standard-map__map-tool" v-show="show_tool==true">
          <a-tooltip placement="bottom">
              <template slot="title">
                  <span>开始勾绘</span>
              </template>
              <span class="map-tools__item" @click="start_draw">
                  <svg  aria-hidden="true" class="svg-icon">
                      <use xlink:href="#icon-map-tool-draw-polygon"></use> 
                  </svg>
              </span>
          </a-tooltip>
           <a-tooltip placement="bottom"  >
              <template slot="title">
                  <span>删除已绘图形</span>
              </template>
               <span class="map-tools__item" @click="clear_draw">
                  <svg  aria-hidden="true" class="svg-icon">
                      <use xlink:href="#icon-map-tool-clear"></use> 
                  </svg>
              </span>
          </a-tooltip>
      </ul>
  </div>
</template>
<script>
  export default {
    data() {
         return {
            ol_map:null,
            zoom:19,
            maxZoom:22,
            minZoom:12,
            activeFeatrueProps:{},
            show_tool:false,

            start_draw_status:false,
        }
    },
    mounted() {
      this.InitMap();
      this.init_keydown();
      this.$mitt.$off("set_zoom").$on('set_zoom', (zoom) => {
        this.setZoom(zoom)
      })
      this.$mitt.$off("set_img_Featrue").$on('set_img_Featrue', (_Featrue) => {
        this.set_img_Featrue(_Featrue)
      })
      this.$mitt.$off("clear_map").$on('clear_map', (mapNum) => {
        this.clearmap(mapNum)
      })
      this.$mitt.$off("show_tool").$on('show_tool', (_show_tool) => {
        this.show_tool=_show_tool
      })
      this.$mitt.$off("set_map_mod").$on('set_map_mod', (_mapMod) => {
        this.mapMod(_mapMod)
      })
    },
    methods: {
      mouseenter(){
        document.getElementById("mapDiv2").focus()
      },
      keydown(e){
        let e1 = e || event || window.event || arguments.callee.caller.arguments[0]//事件对象兼容
        console.log(e)
      },
      init_keydown(){
        document.addEventListener('DOMContentLoaded', function() { 
         
        }); 
        
        setTimeout(()=>{
          let div=document.getElementById("mapDiv2")
          div.addEventListener('keydown', function(e) { alert("a") }); 
          console.log(div)
        },500)
      },
      InitMap(){
        this.ol_map=new this.ol_mapClass({
          target1:'mapDiv1',
          target2:'mapDiv2',
        })
      },
      GetTitle(map){
        if(map==1){
          return this.activeFeatrueProps.QSX?this.activeFeatrueProps.QSX:''
        }
        else if(map==2){
          return this.activeFeatrueProps.HSX?this.activeFeatrueProps.HSX:''
        }
      },
      set_img_Featrue(_Featrue){
        this.activeFeatrueProps=_Featrue.properties.other
        let preimgEXtent=JSON.parse(_Featrue.properties.preimageextend)
        let lstimgEXtent=JSON.parse(_Featrue.properties.lstimageextend)
        this.ol_map.SetImage(this.Get_img(_Featrue.properties.preimage),preimgEXtent.slice(0,4),1,preimgEXtent.slice(4,6));
        this.ol_map.SetFeatrue(_Featrue.geometry.coordinates,1,_Featrue.other)
        this.ol_map.SetImage(this.Get_img(_Featrue.properties.lstimage),lstimgEXtent.slice(0,4),2,lstimgEXtent.slice(4,6));
        this.ol_map.SetFeatrue(_Featrue.geometry.coordinates,2,_Featrue.other)
      },
      set_draw_Featrue(_Featrue){
        this.ol_map.SetFeatrue(_Featrue.edit_geometry.coordinates,2,_Featrue.other)
      },
      setZoom(zoom){
        this.ol_map.setZoom(zoom)
      },
      upDate(){
        this.ol_map.Update()
      },
      clearmap(mapNum){
        this.ol_map.clearMap(mapNum)
      },
      mapMod(status){
        this.start_draw_status=status
      },
      start_draw(){
        this.ol_map.upDate()
        this.ol_map.initDraw();
      },
      clear_draw(){
        this.ol_map.clearDrawLayer()
      }
    },
  }
</script>

<style>
.standard-map__map-tool {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 10;
}
.map-tools__item {
    display: inline-block;
    cursor: pointer;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    -webkit-box-shadow: rgb(0 0 0 / 25%) 0 0 4px 0;
    box-shadow: 0 0 4px 0 rgb(0 0 0 / 25%);
    margin: 0 2px;
    padding: 1px;
    background: hsla(0,0%,100%,.92);
    border-radius: 4px;
}
.map-tools__item svg {
  height: 28px;
  width: 28px;
}
.draw #mapDiv1 {
  /* zoom: 0.5; */
    width: 401px;
    height: 401px;
    position: absolute;
    z-index: 1;
}
.draw #mapDiv2 {
  width: 100%;
}
    
</style>